import { useContext } from 'react';
import { Tag } from 'antd';
import { useLocation, useModel } from 'umi';

import access from '@/access';
import { MainLayoutContext } from '@/layouts';
import { testingMap } from '@/layouts/components/SideMenu/constants';

import { homeUrl } from '../../../../../config/routes';
import { mainMenuList } from '../../../../../config/routes/index';
import Menu from '../components/Menu';
import MenuItem from '../components/MenuItem';

import '../components/index.less';

const MainMenu = () => {
  const mainMenus = mainMenuList;
  const context = useContext(MainLayoutContext);
  const { initialState } = useModel('@@initialState');
  const currentRoles = access(initialState);
  const curPathname = useLocation().pathname;

  return (
    <Menu
      style={{ height: '100vh' }}
      className={curPathname === homeUrl ? 'home-menu' : ''}
    >
      {mainMenus
        .filter((route) => !route.access || currentRoles[route.access])
        .map((route) => {
          return (
            // 零级导航
            <MenuItem
              isBottom={route.path === '/settings'}
              key={route.path + route.component}
              route={route}
              pathList={[route.path]}
              MenuIndex={0}
              onMenuClick={() => context.onSecMenuChange(!!route.routes)}
              tagRender={
                route.testing && (
                  <Tag size="small" className="testing-icon">
                    {testingMap[route.testing]}
                  </Tag>
                )
              }
            >
              <span className="main-menu-name">{route.name}</span>
            </MenuItem>
          );
        })}
    </Menu>
  );
};

export default MainMenu;
